<!--
 Copyright (c) 2018
 Mainflux

 SPDX-License-Identifier: Apache-2.0
-->

<div class="channelsContainer" fxLayout="row" fxLayoutWrap>
  <ng-container [ngSwitch]="channelsStore.channels?.length > 0">
    <ng-container *ngSwitchCase="true">
        <!-- List -->
        <div class="channel-list-container">
          <mat-table #table [dataSource]="channelsStore.channels.toJS()" matSort class="mat-cell">
            <!-- Columns -->
            <ng-container matColumnDef="id">
              <mat-header-cell fxFlex="32%" *matHeaderCellDef mat-sort-header>Id</mat-header-cell>
              <mat-cell fxFlex="32%" *matCellDef="let row" >{{row.id}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="name">
              <mat-header-cell fxFlex="30%" *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
              <mat-cell fxFlex="30%" *matCellDef="let row"> {{row.name}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="connected">
              <mat-header-cell fxFlex="30%" *matHeaderCellDef mat-sort-header>Connected</mat-header-cell>
              <mat-cell fxFlex="30%" *matCellDef="let row">
                <li *ngFor="let item of row.connected"> {{item.id}} </li>
              </mat-cell>
            </ng-container>
            <!-- Actions -->
            <ng-container matColumnDef="actions">
              <mat-header-cell fxFlex="8%" *matHeaderCellDef mat-sort-header></mat-header-cell>
              <mat-cell fxFlex="8%" *matCellDef="let row" >
                <button mat-icon-button color="accent" (click)="editChannel(row)">
                  <mat-icon aria-label="Delete">edit</mat-icon>
                </button>
                <button mat-icon-button color="accent" (click)="deleteChannel(row)">
                  <mat-icon aria-label="Delete">delete</mat-icon>
                </button>
              </mat-cell>
            </ng-container>

            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
      </div>
    </ng-container>

    <ng-container *ngSwitchDefault>
      <h3>It looks like you don't have any channels in your account.</h3>
    </ng-container>
  </ng-container>
</div>

<button mat-mini-fab class="addButton" (click)="addChannel()">
  <mat-icon>add</mat-icon>
</button>
